<template lang="pug">
  .step-5
    Spin(v-if="spinShow" size="large" fix)
    //- Form(:label-width="100")
    //-   Row(type="flex" justify="start" :gutter="16")
    //-     Col(span="6")
    //-       FormItem(label="参保类型：")
    //-         Select(v-model="formValidate_t5.securityType"  placeholder="请选择" style="width:100%" label-in-value clearable @on-change="SecurityTypeChange")
    //-           Option(v-for="(item, index) in securityType_arr" :value="item.value" :key="index") {{ item.label }}
    //-     Col(span="6")
    //-       FormItem(label="参保地区：")
    //-         Cascader.disabled-cascader(v-model="createAreaArr" placeholder="请选择" :filterable="true" :data="areaArr" change-on-select :load-data="loadDataCity" style="width:100%;" @on-change="createAreaChange" @on-visible-change="createAreaVisibleChange" :disabled="createAreaDisabled")
    //-     Col(span="6")
    //-       FormItem(label="参保编号：")
    //-         Select.disabled-cascader(v-model="formValidate_t5.insuranceCode" filterable placeholder="请选择" style="width:100%" :disabled="SecurityTypeDisabled" @on-change="InsuranceCodeChange" clearable)
    //-           Option(v-for="(item, index) in insuranceCode_arr" :value="item.securityNO" :key="index") {{ item.securityNO }}
    //-     Col(span="6")
    //-       Button(type="info" :disabled="createBtnDis" @click="createSecurityType") 添加
    Table.hasTitle-table.beautiful-table(:columns="securityThead" :data="securityTableData" :stripe="true")
      template(slot-scope="{ row, index }" slot="operation")
        Button(type="text" @click="cancelSecurity(row)") 删除
</template>

<script>
import dataApi from '@/api/data.js'

export default {
  name: 'stpe_5',
  props: {
    customerId: String
  },
  data () {
    return {
      areaArr: [],
      mustHave: false, // 必填
      spinShow: false, // 加载中
      isCheck: true, // 是否处于查看状态
      createAreaArr: [], // 新增的参保区域选择
      SecurityTypeDisabled: true, // 参保编号是否可选-没选参保类型时不可选
      createAreaDisabled: true, // 参保区域是否可选--商保时不可选
      createBtnDis: true, // 参保设置添加按钮--编号没选时不可点击
      formValidate_t5: {
        cityId: '', // 参保区域
        cityName: '', // 地区名称
        securityType: '', // 参保类型
        securityTypeName: '', // 参保类型名称
        insuranceCode: '' // 参保编号
      },
      securityType_arr: [ // 参保类型
        { label: '社保', value: 1 },
        { label: '公积金', value: 2 },
        { label: '商保', value: 3 }
      ],
      insuranceCode_arr: [], // 参保信息社保编号数组
      securityThead: [ // 参保信息表头
        {
          title: '参保地区',
          minWidth: 150,
          key: 'cityName'
        },
        {
          title: '类型',
          minWidth: 100,
          key: 'securityTypeName'
        },
        {
          title: '编号',
          minWidth: 100,
          key: 'insuranceCode'
        },
        // {
        //   title: '操作',
        //   minWidth: 100,
        //   slot: 'operation',
        //   align: 'center'
        // }
      ],
      securityTableData: [] // 参保信息表格数据
    }
  },
  created () {
    this.getInsuranceCodes()
    this.getProvince()
  },
  methods: {
    // 获取参保信息
    getInsuranceCodes () {
      this.spinShow = true
      dataApi.getInsuranceCodes({
        id: this.customerId
      }).then(res => {
        // console.log(res)
        this.securityTableData = res.data.data
        this.spinShow = false
      })
    },
    // 保存--参保信息
    createSecurityType () {
      // console.log(this.securityTableData)
      dataApi.postInsuranceCode([Object.assign({ CustomerId: this.customerId }, this.formValidate_t5)]).then((res) => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message)
          this.getInsuranceCodes()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 参保类型选择
    SecurityTypeChange (val) {
      if (val) {
        this.formValidate_t5.securityType = val.value
        this.formValidate_t5.securityTypeName = val.label
        this.createAreaDisabled = true
        this.createAreaArr = []
        this.formValidate_t5.cityId = ''
        this.formValidate_t5.cityName = ''
        this.formValidate_t5.insuranceCode = ''
        switch (val.value) {
          case 1:
            this.createAreaDisabled = false
            this.SecurityTypeDisabled = true
            this.insuranceCode_arr = []
            break
          case 2:
            this.createAreaDisabled = false
            this.SecurityTypeDisabled = true
            this.insuranceCode_arr = []
            break
          case 3:
            this.SecurityTypeDisabled = false
            this.getSecurityNo()
            break
        }
      }
    },
    // 参保地区选择
    createAreaChange (labels, selectedData) {
      console.log(selectedData)
      this.formValidate_t5.cityId = selectedData[selectedData.length - 1].id
      this.formValidate_t5.cityName = selectedData[selectedData.length - 1].name
      // console.log(this.formValidate_t5)
    },
    // 参保地区选择收起时
    createAreaVisibleChange (val) {
      console.log(val)
      if (!val) {
        console.log(this.formValidate_t5)
        this.SecurityTypeDisabled = false
        this.formValidate_t5.insuranceCode = ''
        this.getSecurityNo()
      } else {
        return false
      }
    },
    // 获取参保编号
    getSecurityNo () {
      dataApi.getSecurityNoList({
        securityNo: '',
        areaGUID: this.formValidate_t5.cityId,
        securityType: this.formValidate_t5.securityType,
        pageIndex: 1,
        pageSize: 10000
      }).then((res) => {
        console.log(res)
        this.insuranceCode_arr = res.data.data
      })
    },
    // 参保编号选择
    InsuranceCodeChange () {
      if (this.formValidate_t5.insuranceCode) {
        this.createBtnDis = false
      } else {
        this.createBtnDis = true
      }
    },
    // 删除编号
    cancelSecurity (row) {
      console.log(row)
      this.$Modal.confirm({
        title: '确定删除？',
        content: '<p>删除后不可恢复！</p>',
        onOk: () => {
          dataApi.DeleteInsuranceCode({
            id: row.id
          }).then(res => {
            if (res.data.success) {
              this.getInsuranceCodes()
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        },
        onCancel: () => {
        }
      })
    },
    /**
     * 分级查询地区
     */
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: [],
              loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
        dataApi.getArea({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return { ...item, label: item.name, value: item.id }
          })
          val.loading = false
          callback()
        })
      }
    },
    /**
     * 查询所有省
     */
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    }
  }
}
</script>

<style lang="less">

</style>
